<template>
    <div class="bfPage">
      <div class="main">
        <!-- 左边 唱片 -->
        <div class="left">
         <div class="rwap">
          <img  class="song-needle" :class="{needle2:data[0] == true}" src="../../public/images/needle-ip6.png" alt="">
          <div class="song-bg">
            <div class="cover-f" ref="coverF">
              <div class="cover " ref="cover"  :class="{play:data[0] == true && data[1]== true}" >
             
              <img src="../../public/images/cover.jpg" alt="">
            </div>
            </div>
          </div>
         </div>
         
        </div>
        <div class="concent">
          <div class="lyric">
            <p>下雨的时候特别想见你</p>
            <div class="title">
              <span>陈壹千-</span>
              <span>下雨的时候特别想见你</span>
            </div>
             <div class="singWord">
                    <span>作曲：张三</span>
                    <span>作曲：闻震</span>
                    <span>时光穿梭不断 流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                </div>
          </div>
        </div>
        <div class="right">
          <div class="listBox">
            <div class="list">
              <p class="target">播放来源：薛之谦</p>
              <p class="title">包含这首歌的歌单</p>
              <ul>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
              </ul>
            </div>
            <div class="list">
              <p class="title">喜欢这首歌的人也喜欢听</p>
              <ul>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
                <li>
                  <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                  <span>心跳普通|触动心弦优质旋律</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="mainBottom">
         <div class="comment">

      <!-- 评论区精彩评论 -->
      <div class="pl-content">
            <span class="title">精彩评论(2100)</span>
            <div class="pl-list">
                <img src="../../public/homeImg/recommGd1.jpg" alt="">
                <div class="pl-content-right">
                    <div class="pl-content-right-top">
                        <span>网名：</span>
                        <span>夏天这么热 ，会变成熟人还是热狗呢（doge）</span>
                    </div>
                    <div class="pl-right-other">
                        <span>10.09</span>
                        <ul>
                            <li><span class="iconfont">&#xf010d;</span><span>345</span></li>
                            <li><span class="iconfont">&#xe706;</span></li>
                            <li @click="foucePl()"><span class="iconfont">&#xe664;</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="pl-list">
                <img src="../../public/homeImg/recommGd1.jpg" alt="">
                <div class="pl-content-right">
                    <div class="pl-content-right-top">
                        <span>网名：</span>
                        <span>夏天这么热 ，会变成熟人还是热狗呢（doge）</span>
                    </div>
                    <div class="pl-right-other">
                        <span>10.09</span>
                        <ul>
                            <li><span class="iconfont">&#xf010d;</span><span>345</span></li>
                            <li><span class="iconfont">&#xe706;</span></li>
                            <li @click="foucePl()"><span class="iconfont">&#xe664;</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="pl-list">
                <img src="../../public/homeImg/recommGd1.jpg" alt="">
                <div class="pl-content-right">
                    <div class="pl-content-right-top">
                        <span>网名：</span>
                        <span>的中国 青春婀娜灯火里的中国 胸怀辽阔灯火漫卷的万里山河初心换回了百的中国 青春婀娜灯火里的中国 胸怀辽阔灯火漫卷的万里山河初心换回了百</span>
                    </div>
                    <div class="pl-right-other">
                        <span>10.09</span>
                        <ul>
                            <li><span class="iconfont">&#xf010d;</span><span>345</span></li>
                            <li><span class="iconfont">&#xe706;</span></li>
                            <li @click="foucePl()"><span class="iconfont">&#xe664;</span></li>
                        </ul>
                    </div>
                </div>
            </div>
      </div>
      <div class="dislogPl">
          <Dialog :data='[Message,MessageShow,ishowZf,btn]' @ishowZfF = 'ishowZfF'><span name='title' slot="title">评论</span></Dialog>
      </div>

    </div>
  </div>
</div>
</template>
<script>
import Message from './slotMessage.vue'
import Dialog from './slotDislog.vue'
export default {
    name:'bfPage',
      props:{
     data:{
            // typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
    data() {
        return {
            songCoverMatrix:'',
            songImgMatrix:'',
            num:140,
            contentFrind:'',
            text:'',
            Message:'转发成功',
            MessageShow:false,
            ishowZf:false,
            btn:'评论'

        }
    },
  components:{
        Message,Dialog
    },
    watch:{
         data: {
       deep:true, 
      handler: function (val) {
       if(!val[1]){
        
      }

      },
      immediate: true,
    },
  },
    mounted(){
      
    },
    methods:{
      foucePl(){
       this.ishowZf = true
      },
        //接收转发子组件传过来的内容
        ishowZfF(value){
            this.ishowZf = value
        },
      //继续播放
      correctCoverRotate(){
        if(this.songImgMatrix !==  ''){

    
        }
      },
      // 暂停
      preservationCoverRotate(){
        // 暂停时候保存度数(在页面中的时候)
        //感谢up主：https://www.bilibili.com/video/BV1Zg4y1v79m?spm_id_from=333.880.my_history.page.click
       this.songCoverMatrix = window.getComputedStyle(this.$refs.coverF).getPropertyValue('transform');
        this.songImgMatrix = window.getComputedStyle(this.$refs.cover).getPropertyValue('transform');
     if (this.songCoverMatrix  === 'none') {
      // 第一次暂停
       this.$refs.coverF.style.transform = this.songImgMatrix
    }else{
      const matrix1 = this.parseMatrix(this.songCoverMatrix);
      const matrix2 = this.parseMatrix(this.songImgMatrix);
      const angle1 = this.atan2Fn(matrix1[0], matrix1[1]);
      const angle2= this.atan2Fn(matrix2[0], matrix2[1]);
      const angle = angle1 + angle2;
      const radian = (Math.PI / 180) * angle;
      const [a, b, c, d] = [Math.cos(radian), Math.sin(radian), -Math.sin(radian), Math.cos(radian)];
      this.$refs.coverF.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
    }
      },
      //退出后清空度数
      exit(){
        this.songCoverMatrix = ''
       this.songImgMatrix = ''
        this.$refs.coverF.style.transform= this.songCoverMatrix
      },
      /**
 * 解析 matrix 数据
 * @param {String} matrix "matrix(-0.97874, 0.205104, -0.205104, -0.97874, 0, 0)"
 * @returns {Array} [a, b, c, d, e, f]
 */
      parseMatrix(Matrixs){
            const start = Matrixs.indexOf('(') + 1;
            const end = Matrixs.indexOf(')');
            const content = Matrixs.slice(start, end);
            const values = content.split(', ');
            return values;
      },
      atan2Fn(x,y){
        //atan2 获取角度 先传y再传x
        const radian = Math.atan2(y, x);
        //角度=弧度*180/Math.PI
          const angle = radian * (180 / Math.PI);
          return angle;
      }
    }
 
} 
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon5/iconfont.ttf?t=1660354276769') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
    // 用户不可选中文本v
      user-select: none;
}
.bfPage{
margin-bottom: 80px;

.main{
    padding-top: 0.390625rem /* 75/192 */;
    font-size: 100px;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    .left,.concent,.right{
        width: 33.3%;
        // border: 1px solid red;
       }
      .left{
       span{
         font-size: 20px;
       }
      .rwap{
        margin: 100px auto;
        position: relative;
      }
      @media screen and  (min-width: 600px) and (max-width:1600px) {
          .rwap{
            
            height: 420px;
            width: 330px;
            
          }
        }
        @media screen and  (min-width: 1601px) and (max-width:1940px)  {
          .rwap{
            width: 400px;
            height: 500px;
          
          }
        }
      .song-needle {
        position: absolute;
        z-index: 3;
        left: 48%;
        transform: rotate(-30deg);
        transform-origin: left top;
        transition: transform .5s;
      }
       .needle2{
         transform: rotate(0deg);
       }
          @media screen and  (min-width: 600px) and (max-width:1600px) {
          .song-needle{
             width: 100px;
            height: 155px;
             top:6%;
          }
        }
       @media screen and  (min-width: 1601px) and (max-width:1940px)  {
          .song-needle{
            height:  182px;
            width: 113px;
              top: 2%;
          }
        }
      .song-bg{
            position: absolute;
            z-index: 2;
            left: 0;
            top: 100px;
            right: 0;
            bottom: 0;
            background: url("../../public/images/disc-ip6.png") no-repeat center;
            background-size: contain;
            display: flex;
            align-items: center;
            justify-content: center;
            .cover-f{
                  overflow: hidden;
                  box-sizing: border-box;
            }
                 @media screen and  (min-width: 600px) and (max-width:1600px) {
                  .cover-f{
                    
                    height: 207px;
                    width: 207px;
                  }
                }
                @media screen and  (min-width: 1601px) and (max-width:1940px)  {
                  .cover-f{
                    width: 250px;
                    height: 250px;
                  }
                }
            .cover.play {
              animation: circle 38s linear infinite;
            }
            @keyframes circle {
              0% {
                transform: rotate(0);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            .cover{
           
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    overflow: hidden;
                    font-size: 0;
                                
                img{
                  width: 100%;
                }
}
            
                @media screen and  (min-width: 600px) and (max-width:1600px) {
                  .cover{
                    
                    height: 207px;
                    width: 207px;
                  }
                }
                @media screen and  (min-width: 1601px) and (max-width:1940px)  {
                  .cover{
                    width: 250px;
                    height: 250px;
                  }
                }
    }
    }
    .concent{
       padding-top: 50px;
      .lyric{
        p{
           font-size: 33px;
           text-align: center;
           color: #2D2E33;
        }
        .title{
          width: 100%;
          text-align: center;
          color: #838894;
          margin: 17px 0 !important;
          span{
          font-size: 18px;
          
        }}
        .singWord{
          //  padding: 0 70px 0 0;
            height: 440px;
            overflow-y: scroll;
            box-sizing: border-box;
           
            margin-top: 20px;
            -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0, #ffffff 10%, #ffffff 15%, #ffffff 75%, #ffffff 85%, rgba(255, 255, 255, 0.3) 100%);
            span{
                display: block;
                font-size: 17px;
                color: #616161;
                font-weight: 200px;
                margin: 28px 10px;
                text-align: center;
            }
        }
                .singWord::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;
        // border-right: 1px solid #F3F3F3;
    }
       .singWord::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #E1E1E1;
    // background: red;
    width: 10px;
    height: 30px !important;
   background-color: rgba(0,0,0,.1);
}   
      }
    }
    .right{
      padding-top: 50px;
    position: relative;
      .listBox{
        position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-25%);
    top: 200px;
    right: 0;
    bottom: 0;
          overflow-y: scroll;
     margin: 0 auto;
      // border: 1px solid red;
      box-shadow: 0 7px 5px -5px #fff;
//  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; 
    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 80%,rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.2) 100%);
      .list{
        .target{
          font-size: 17px;
          color: #2F3132;
         
           cursor: pointer;
        }
        p{
          margin: 10px 5px;
          overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
        }
        .target:hover{
          color: #385CB0;
        }
        .title{
          font-size: 17px;
          color: #303132;
          font-weight: 800;
          margin: 17px 5px;
        }
        ul{
          li{
            display: flex;
            align-items: center;
             padding: 10px 5px;
            img{
            width: 36px;
            height: 36px;
            border-radius: 5px;
          }
           span{
              font-size: 15px;
             color: #303030;
               margin-left: 15px;
               overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
          }
          li:hover{
            background: #E3E9EC;
            border-radius: 5px;
          }
        }
      }
         }
            @media screen and  (min-width: 600px) and (max-width:1600px) {
      .listBox{
            width:75%;
          height: 320px;
        }
      }
      @media screen and  (min-width: 1601px) and (max-width:1940px)  {
        .listBox{
          width:75%;
          height: 360px;
        }
      }
              .listBox::-webkit-scrollbar {/*滚动条整体样式*/
         width: 5px;
        border-right: 1px solid #F3F3F3;
    }
       .listBox::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #E1E1E1;
    width: 10px;
    height: 30px !important;
}   
    }
 
}
.mainBottom{
  .comment{
    width: 60%;
    margin: 0 auto;
    padding: 20px;

.Textarea-box{


    border-radius: 5px;
    // padding: 20px;
   border-radius: 5px;
   position: relative;
    span{

        cursor: pointer;
          text-align: right;
        margin: 6px 0;
    }
    .cha{
        font-size: 20px;
        color: black;
        display: block;
    }
    .cha:hover{
        color: #9F9F9F;
    }
   span[name='title']{
    font-size: 20px;
    font-weight: 800;
     color: black;
   }

//    .zf-box{

    //  height: 160px;
    //  width: 100%;
    // box-sizing: border-box;
    // border: solid #E5E5E5 1px;
    // background: white;
    //     position: relative;
    textarea{
        -webkit-appearance: none ; //是为了去除内阴影样式，但是缺点是不可输入；
        -webkit-user-select: auto; // 解决输入问题；
        outline: none;
    resize: none;
    width: 100%;
    font-size: 16px;
  line-height: 29px;
    padding: 2px 15px 2px 11px;
    box-sizing: border-box;
    }
    textarea {
     letter-spacing: 1px;
      text-align: justify;
    //   text-indent: 48px;
      border: none;
      resize: none;
      outline: none;
      font-family: Avenir,Helvetica,Arial,sans-serif;
    }

    textarea::-webkit-scrollbar {
      width: 4px;    
    }

    textarea::-webkit-scrollbar-thumb {
      border-radius: 10px;
          box-shadow: inset 0 0 5px #e1e1e1;
    background: rgba(0, 0, 0, 0.2);
    }

    textarea::-webkit-scrollbar-track {
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
    //   background: rgba(0,0,0,0.1);
    }
    .bottom{
        display: inline-block;
        align-items: center;
        position: absolute;
           right: 23px;

    top: 93px;

    div:first-child{
            width: 90%;
    display: inherit;
    }
           .num{
    font-size: 14px;
   
    color:#CFCFE7 ;
    cursor: pointer;
    
    }
    .numed{
        color: #CD1818;
    }
    }
 
//    }

}
.other-box:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
   .other-box{
    position: relative;
    margin: 10px 0;
    div:first-child{
        float: left;
        position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }
    .right-pl{
    outline: none;
    font-size: 18px;
    border: #CDCDCE solid 1px;
    padding: 6px 19px;
    color: #222;
    border-radius: 20px;
    float: right;
    
    }
    .right-pl:hover{
        background: #F3F3F4;
    }
    
   }
   .pl-content{
    .title{
        font-size: 19px;
        font-weight: 900;
        color: #313030;
    }
    .pl-list{
        display: flex;
        margin-top: 20px;
         img{
                 width: 52px;
                height: 52px;
                border-radius: 50%;
            }
        .pl-content-right{
             margin-left: 15px;
                 width: 100%;
             .pl-content-right-top{
                margin-bottom: 15px;
                width: 97%;
                span{
                    font-size: 16px;
                }
                span:first-child{
                    color: #507DAF;
                }
             }
            .pl-right-other:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
            .pl-right-other{
                
                  span:first-child{
                    float: left;
                    font-size: 14px;
                    color: #979798;
                  }
                  ul{
                    float: right;
                    display: flex;
                     li{
                        display: flex;
                        width: 50px;
                        text-align: center;
                        justify-content: center;
                        line-height: 21px;
                        align-items: center;
                        height: 21px;
                        margin-right: 15px;
                        border-right: 1px solid #E0E0E0;
                    span{
                        color: #616162;
                        margin: 5px;
                      font-size: 16px;
                        cursor: pointer;
                    }
                    span:first-child{
                        color: #616162;
                       font-size: 19px;
                    }
                    span:last-child{
                       margin-right: 25px;
                    }
                    span:hover{
                       color: #B3B3B3;
                    }
                }
                li:last-child{
                    border-right:none !important;
                }
                  }
            }
        }
    }
   }
}
}
}
</style>